import React from 'react';
import { Form, DatePicker, Button, Input, Message } from 'antd';
import FileUpload from '@/components/Custom/FileUpload';
import moment from 'moment';
import RecordButton from '../RecordButton';
import { FormLayout } from '../../components';

export default function GuideRecord({ form }) {
    const { getFieldDecorator } = form;
    const [state, setState] = React.useState();
    return (
        <>
            <FormLayout type="full">
                <Form.Item label="引导时间">
                    {getFieldDecorator('guideTime', { initialValue: moment() })(
                        <DatePicker
                            placeholder="请选择"
                            allowClear={false}
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                        />
                    )}
                </Form.Item>
            </FormLayout>
            <FormLayout type="full">
                <Form.Item label="录音">
                    {getFieldDecorator('recordsUrl', {
                        validateTrigger: 'onSubmit', // 设置进行表单验证的时机为onSubmit
                        force: true,
                        rules: [
                            {
                                validator(_, value, callback) {
                                    if (state === 1) {
                                        Message.error('当前有录音进行中！');
                                        return;
                                    }
                                    callback();
                                }
                            }
                        ]
                    })(<RecordButton onChange={(_, s) => setState(s)} />)}
                </Form.Item>
            </FormLayout>
            <FormLayout type="full">
                <Form.Item label="沟通纪要">
                    {getFieldDecorator('summary')(<Input.TextArea rows={7} placeholder="请输入" maxLength={500} />)}
                </Form.Item>
            </FormLayout>
            <FormLayout type="full">
                <Form.Item
                    label="相关资料"
                    help="支持 pdf、doc(x)、xls(x)、jp(e)g、png、rar 等格式的附件，单个文件大小为10MB以内"
                >
                    {getFieldDecorator('resourceRelation')(
                        <FileUpload
                            categoryCode="probationGuideFile"
                            checkFileSize={10}
                            maxFileCount={1}
                            checkFileType="pdf、doc、docx、jpg、jpeg、png、rar、xls、xlsx"
                            checkFileTypeMsg="只能上传 pdf、doc(x)、xls(x)、jp(e)g、png、rar 格式的文件！"
                            checkFileSizeMsg="文件大小不能超过10MB！"
                        >
                            <Button>添加附件</Button>
                        </FileUpload>
                    )}
                </Form.Item>
            </FormLayout>
        </>
    );
}
